<template>
    <div class="pcds-select">
        <div class="select-head">
            <p class="head-item ellipsis" v-for="(item, index) in pcdsSelectList" :key="index" @click="selectHeadItem(index)">{{ item.name }}</p>
            <p class="head-item placeholder" v-if="pcdsSelectList.length < 4">请选择</p>
        </div>
        <div class="select-main" ref="selectMain" v-loading="loading">
            <template v-for="(list, index) in pcdsOptionsList">
                <div class="main-page" :key="index" v-if="index === currentIndex">
                    <div class="page-item" v-for="ele in list" :key="ele.key">
                        <div class="item-letter">{{ ele.key }}</div>
                        <div class="item-content">
                            <span class="name" :class="{ actived: pcdsSelectList[index] && pcdsSelectList[index].name === cityItem.name }" v-for="(cityItem, cityIndex) in ele.value" :key="cityIndex" @click="seletMainItem(index, cityItem)">{{ cityItem.name ? cityItem.name : '' }}</span>
                        </div>
                    </div>
                </div>
            </template>
        </div>
        <div class="select-button">
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="confirm">确认</el-button>
        </div>
    </div>
</template>

<script>
import { getAreaData } from '@/api/address'
export default {
    name: 'PcdsSelect',
    props: {
        showPcdsSelect: {
            type: Boolean,
            default: false
        },
        // 编辑时的选中
        pcdsSelectedList: {
            type: Array,
            default: () => ([])
        }
    },
    data() {
        return {
            // 数据加载
            loading: false,
            // 当前待选择结果index
            currentIndex: 0,
            // 省市区选择结果
            pcdsSelectList: [],
            // 省市区选项
            pcdsOptionsList: []
        }
    },
    methods: {
        // 省市区 - 点击选择结果项
        selectHeadItem(index) {
            this.currentIndex = index
            this.$refs.selectMain.scrollTop = 0
        },
        // 省市区 - 选择省市区
        async seletMainItem(index, data) {
            this.$set(this.pcdsSelectList, index, data)
            if (index >= 3) {
                // 手动选择至最后一级 -> 选择结束
                this.$emit('updateResult', this.pcdsSelectList)
            } else {
                this.pcdsSelectList.splice(index + 1)
                this.pcdsOptionsList.splice(index + 1)
                await this.initData()
                this.currentIndex = index >= 2 ? 3 : index + 1
                this.$refs.selectMain.scrollTop = 0
            }
        },
        // 取消选择
        cancel() {
            this.$emit('updateSwitch', false)
        },
        // 确认选择
        confirm() {
            if (this.pcdsSelectList.length < 3) return this.$message_tip('请选择省市区', 'warning')
            if(this.pcdsSelectList.length === 3) this.pcdsSelectList.push({})
            this.$emit('updateResult', this.pcdsSelectList)
        },
        // 初始化选项
        initData() {
            return new Promise((resolve, reject) => {
                this.loading = true
                let name = this.pcdsSelectList.length > 0 ? this.pcdsSelectList.map(item => item.name).join(',') : ''
                getAreaData({
                    content: name
                }).then(res => {
                    this.pcdsOptionsList = res.data
                    this.loading = false
                    resolve(true)
                }).catch(error => {
                    this.loading = false
                    resolve(false)
                })
            })
        },
    },
    watch: {
        'showPcdsSelect': function (newVal, oldVal) {
            if (newVal) {
                if (this.pcdsSelectedList.length > 0) {
                    this.pcdsSelectList = this.pcdsSelectedList.map(item => {
                        return {
                            name: item,
                            code: ''
                        }
                    })
                }
                this.initData()
                let index = this.pcdsSelectList.length >= 4 ? 3 : this.pcdsSelectList.length <= 0 ? 0 : this.pcdsSelectList.length
                this.currentIndex = index
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.pcds-select {
    width: 100%;
    background-color: #ffffff;
    .select-head {
        height: 40px;
        display: flex;
        align-items: flex-end;
        border-bottom: 2px solid #f7f7f7;
        .head-item {
            flex: 0 0 25%;
            padding: 4px 6px;
            cursor: pointer;
            &.placeholder {
                color: $--color-danger;
            }
        }
    }
    .select-main {
        width: 100%;
        padding-top: 10px;
        min-height: 100px;
        max-height: 200px;
        overflow: hidden scroll;
        .main-page {
            display: flex;
            flex-direction: column;
            .page-item {
                display: flex;
                justify-content: flex-start;
                .item-letter {
                    color: #333333;
                    font-size: 14px;
                    padding: 5px 5px;
                }
                .item-content {
                    display: flex;
                    justify-content: flex-start;
                    flex-wrap: wrap;
                    .name {
                        padding: 5px 5px;
                        color: #333333;
                        font-size: 14px;
                        cursor: pointer;
                        transition: all 0.26s ease;
                        &:hover {
                            color: $--color-danger;
                        }
                        &.actived {
                            color: $--color-danger;
                        }
                    }
                }
            }
        }
    }
    .select-button {
        padding: 10px 0 0 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
</style>